<template>
  <div id="main">
      <div v-if="list.length > 0" >
          <div class="box-card" v-for="(item,index) in listData"  :key="index"  >
            <div class="card_title">{{item.title}}</div>
            <div class="card_desc" v-html="(item.content)">{{item.content | desc}}</div>
            <div class="card_sub_t">
                作者:{{item.author}}   日期:{{item.time| filterTime}} 
            </div>
        </div>
        <p class="more" v-if="isLoading">数据加载中...</p>
      <p class="more" v-if="noMore">我是有底线的...</p>
      </div>
    <el-empty description="找不到您搜索的内容,请换个关键字试试" v-else > </el-empty>
     
</div>
</template>

<script>
import moment from 'moment'
export default {
    // 接词
    props:{
        list:{
            type:Array,
            default: ()=>{
                return [];
            },
        },
        noMore:{
            type:Boolean
        },
        isLoading:{
            type:Boolean
        },
        isLoad:{
            type:Boolean,
            default:false
        }

    },
    data(){
        return {
            listData:[]
        }
    },
    beforeUpdate(){
        if(this.islad){
            this.listData  = [...this.listData,...this.list];
        }else{
            this.listData = [...this.list];
        }
    },
    filters:{
        filterTime(val){
            return moment.unix(val / 1000).format("YYYY-MM-DD  HH:mm:ss")
        },
        desc(val){
            return val.replace(/<[^>]+>/g,"");
        }
    },
}
</script>

<style lang="scss" scoped>
@import "../theme/style.scss";
#main{
  
    .box-card {
        width: 100%;
        padding:10px 5px;
        border-bottom: 1px solid rgb(241, 238, 238);
        font-size: 14px;  
        box-sizing: border-box;
        &:hover{
            background-color: #f4f4f5;
            cursor: pointer;
        }
        .card_title {
            font-size: 17px;
            color: rgb(94, 93, 93);
            font-weight: bold;
          

        }
        .card_desc{
            font-size: 12px;
            margin: 8px 0;
            color: rgb(192, 188, 188);
        }
          .card_sub_t{
          
            color: rgb(145, 145, 145);
        }

    } 
}
</style>